<template>
	<view class="icon" :style="[style]"></view>
</template>

<script>
	export default {
		props: {
			icon: {
				type: String,
				default: '',
			},
			size: {
				type: String,
				default: '30',
			},
			color: { // 16进制
				type: String,
				default: '#999',
			},
			borderRadius: { // 16进制
				type: String,
				default: '0rpx',
			}
		},
		computed: {
			style() {
				return {
					width: `${this.size}rpx`,
					height: `${this.size}rpx`,
					borderRadius: `${this.borderRadius}`,
					backgroundImage: `url(${this.$gm(this.$svg[this.icon], this.color)})`
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.icon {
		background-size: contain;
		background-repeat: no-repeat;
	}
</style>